<template>
  <div class='banner'>
      <el-carousel indicator-position="inside"
        class='carousel-container'>
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <div class='box posi-rel'>
            <div class='big-wrap'
              :style="{backgroundImage: 'url(' + item.imageUrl + '?imageView&blur=20x40)',
                       backgroundSize: '6000px',
                       backgroundPosition: 'center center' }">
              <img class='banner-wrap posi-ab cursor-pointer'
              :src= "item.imageUrl + '?imageView&quality=89'"
              @click='routerToAlbum(item.encodeId)'>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  data () {
    return {
      imgList: []
    }
  },
  mounted () {
  },
  created () {
    this._getBanner()
  },
  methods: {
    async _getBanner () {
      let res = await this.$api.getBanner()
      this.imgList = res.data.banners
    },
    routerToAlbum(row){
      console.log('row:', row)
      this.$router.push({path:'/album', query:{ id:row}})
    }

  }
}
</script>

<style lang='less' scoped>
@height: 300px;
@width: 100%;
  .banner {
    height: @height;
    /deep/.carousel-container {
      height: @height;
      margin: 0 auto;
      el-carousel__item {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 285px;
        margin: 0;
      }
      .box {
        height: @height;
      }
      .big-wrap {
        width: @width;
        height: @height;
      }
      .banner-wrap {
        width: 730px;
        height: @height;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
      }
    }
  }
</style>
